<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #addDiv{
      width: 800px;
      height: 400px;
      background-color: rgba(255,0,0,0.5);
      position: absolute;
      left: 0px;
      top:0px;
      display: flex;
      justify-content: center;
      align-items: center;
      visibility: hidden;
    }

    #contentDiv{
      width: 300px;
      height: 300px;
      background-color: white;
    }
  </style>
  <script src="table.js"></script>
  <script>
      function $(id){
        return document.getElementById(id);
      }

      function showAddDiv(){
        //显示遮罩
         $("addDiv").style.visibility = "visible";
         //将遮罩大小，设置为整个文档的大小
        $("addDiv").style.width = document.documentElement.clientWidth+"px";
        $("addDiv").style.height =document.documentElement.clientHeight+"px";
      }
      function closeDiv(){
        //重新隐藏遮罩
        $("addDiv").style.visibility = "hidden";
      }

      let x = "3eee";
      let y = "9";
      alert(isNaN(x)+"   "+isNaN(y));
  </script>
</head>
<body>
  <table border="1" cellspacing="0" width="50%">
      <thead>
        <tr><th>编号</th><th>姓名</th><th>电话</th></tr>
      </thead>

      <tbody id="data">
        <tr><td>001</td><td>张三</td><td>13029382736</td></tr>
        <tr><td>001</td><td>张三</td><td>13029382736</td></tr>
        <tr><td>001</td><td>张三</td><td>13029382736</td></tr>
        <tr><td>001</td><td>张三</td><td>13029382736</td></tr>
        <tr><td>001</td><td>张三</td><td>13029382736</td></tr>
      </tbody>
  </table>
  <input type="button" value="添加" onclick="showAddDiv()">

  <div id="addDiv">
      <div id="contentDiv"><h2>内容</h2> <input type="button" value="关闭" onclick="closeDiv()"></div>
  </div>
</body>
</html>
